<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="../../javascript/react.js"></script>
<script src="../../javascript/react-dom.js"></script>
<script src="../../javascript/babel.js"></script>
<script type="text/babel">
    class App extends React.Component {
        constructor(props) {
            super(props)
            this.state = {movies: [1, 2, 3]}
        }

        render() {
            const {movies} = this.state
            const renderMovies = () => movies.map(item => <li key={item}>{item}</li>)
            return (
                <div>
                    <ul>
                    {/*
                       实现电影案例的第二种方式
                      {movies.map(item => <li key={item}>{item}</li>)}
                    */}

                      {/* 实现电影案例的第二种方式 */}
                      {renderMovies()}
                    </ul>
                    <button onClick={this.pushElement}>push一个元素</button>
                </div>
            );
        }

        pushElement = () => {
            this.setState((state) => {
                return {
                    movies: [Math.random(), ...state.movies]
                }
            })
        }
    }

    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
</script>
</body>
</html>
